<template>
	<view>
		<u-navbar title="聊天记录" :border-bottom="false"></u-navbar>
		<view>
			<view class="u-flex u-row-center u-m-b-20" v-if="ago.nomore">
				<view class="bg-gray u-p-x-10 u-p-y-4 radius">
					没有更多了
				</view>
			</view>
			<msg-bable 
				v-for="(item,index) in list" 
				:msg="item"
				:key="index"
				@tapMsg="tapMsg(item)"
				@tapAvatar="tapAvatar(item)"
				@menu="menuMsg(item)"
			></msg-bable>
		</view>
		<u-popup v-model="menuSheet.show" mode="center" border-radius="10">
			<view class="menuSheet">
				<view class="menu-opt" v-for="(item,index) in menuSheet.list" :key="index" @tap="askConfirm(item)">
					{{item.label}}
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {copy, jumpTo} from "@/utils/util.js"
	import { searchHistory } from "@/api/session.js"
	import { msgTypes } from "@/IM";
	import msgBable from "./hisBable/index.vue"
	import { ConversationType } from "@/entity/ConversationType";
	import { Conversation } from "@/entity/Conversation";
	let bridge = null 
	export default {
		components:{
			msgBable
		},
		data() {
			return {
				list:[],
				id:'',
				type:ConversationType.Group, 
				count:15,
				ago:{
					time:0,
					nomore:false
				},
				after:{
					time:0,
					nomore:false
				},
				menuSheet:{
					show:false,
					list:[
						{
							label:'复制',
							fun:'copy'
						}
					]
				},
			};
		},
		onLoad({id,type}) {
			this.id = id
			this.type = Number(type)
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('initMsg',(msg)=>{
				this.ago.time = msg.createTime
				this.after.time = msg.createTime
				this.list.push({...msg})
				this.moreAfter()
			})
		},
		async onPullDownRefresh() {
			try{
				await this.moreAgo()
			}finally{
				uni.stopPullDownRefresh()
			}
		},
		onReachBottom() {
			this.moreAfter()
		},
		methods:{
			async moreAgo(){
				try{
					if(this.ago.nomore){
						return []
					}
					const list = await searchHistory({
						id:this.id,
						chatType:Conversation.type2Biz(this.type),
						startTime:0,
						endTime:this.ago.time,
						order:'desc',
						pageNo:1,
						pageSize:this.count
					})
					if(!list||list.length<this.count){
						this.ago.nomore = true
					}
					list.reverse()
					const [{createTime=Date.now()}] = list.slice(0,1)
					this.list.unshift(...list)
					this.ago.time = createTime
					return list
				}finally{
					
				}
			},
			async moreAfter(){
				try{
					if(this.after.nomore){
						return []
					}
					const list = await searchHistory({
						id:this.id,
						chatType:Conversation.type2Biz(this.type),
						startTime:this.after.time,
						endTime:Date.now(),
						order:'asc',
						pageNo:1,
						pageSize:this.count
					})
					if(!list||list.length<this.count){
						this.after.nomore = true
					}
					const [{createTime=Date.now()}] = list.slice(-1)
					this.list.push(...list)
					this.after.time = createTime
					return list
				}finally{
					
				}
			},
			async menuMsg(msg){
				const list = []
				if(msg.msgType==msgTypes.TEXT){
					list.push({
						label:'复制',
						fun:'copyMsg'
					})
				}
				if(!list.length){
					return 
				}
				const opt = await new Promise((resolve,reject)=>{
					this.menuSheet.list = list
					this.menuSheet.show = true
					bridge = {
						resolve,
						reject
					}
				})
				this.menuSheet.show = false
				if(opt.fun=='copyMsg'){
					this.copyMsg(msg)
				}
			},
			tapMsg(msg){ 
				
				if(msg.msgType==msgTypes.TEXT||msgTypes.AUDIO==msg.msgType||msg.msgType==msgTypes.RED){
					return
				}
				if(msg.msgType==msgTypes.CARD){
					return this.handleCard(msg)
				}
				// #ifdef H5
				
				if(msg.msgType==msgTypes.IMG){
					uni.previewImage({
						current:msg.extras.imgUrl,
						urls:this.list.reduce((r,n)=>{
							if(n.msgType==msgTypes.IMG){
								r.push(n.extras.imgUrl)
							}
							return r
						},[])
					})
				}
				if(msg.msgType==msgTypes.VIDEO){
					jumpTo(`/pages/preVideo/preVideo?src=${msg.extras.videoUrl}`)
					
					
					
					
					
				}
					
				// #endif
				
				// #ifdef APP-PLUS
				if(msg.msgType==msgTypes.IMG){
					uni.previewImage({
						current:msg.extras.imgUrl,
						urls:this.messages.reduce((r,n)=>{
							if(n.msgType==msgTypes.IMG){
								r.push(n.extras.imgUrl)
							}
							return r
						},[])
					})
				}
				if(msg.msgType==msgTypes.VIDEO){
					jumpTo(`/pages/preVideo/preVideo?src=${msg.extras.videoUrl}`)
					
				}
				// #endif
				
				// #ifdef MP-WEIXIN
				wx.previewMedia(
					this.messages.reduce((r,n)=>{
						if(n.msgType==msgTypes.IMG){
							if(n.extras.imgUrl==msg.extras.imgUrl){
								r.current=r.sources.length
							}
							r.sources.push({
								url:n.extras.imgUrl,
								type:'image'
							})
						}
						if(n.msgType==msgTypes.VIDEO){
							if(n.extras.videoUrl==msg.extras.videoUrl){
								r.current=r.sources.length
							}
							r.sources.push({
								url:n.extras.videoUrl,
								type:'video',
								poster:n.extras.thumb
							})
						}
						return r
					},{sources:[],current:0})
				)
				// #endif
			},
			tapAvatar(msg){
				jumpTo(`/pages/user/info?id=${msg.userId}`)
			},
			handleCard({extras,from}){
				if(extras.type==ConversationType.Group){
					jumpTo(`/pages/group/facade?id=${extras.id}&from=${from}`)
				}else if(extras.type==ConversationType.Single){
					jumpTo(`/pages/user/info?id=${extras.id}`)
				}
			},
			copyMsg(msg){
				copy(msg.content)
			},
			askConfirm(e){
				bridge&&bridge.resolve&&bridge.resolve(e)
			},
			askCancel(e){
				bridge&&bridge.reject&&bridge.reject(e)
			}
		}
	}
</script>
<style>
	page{
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.menuSheet{
		width: 500rpx;
		.menu-opt{
			padding: 30rpx 40rpx;
			font-size: 32rpx;
			&+.menu-opt{
				border: 1rpx solid #F5F5F5;
			}
		}
	}
</style>
